import React, {useEffect} from "react"
import {connect} from 'react-redux'
import {Card, CardBody, Button} from "reactstrap"
import Slider from "rc-slider"
import {getProjectList} from '../../../redux/actions/projects'
import {getEventsTypes} from '../../../redux/actions/events'
import {getContacts} from '../../../redux/actions/contacts'
import {getTags} from '../../../redux/actions/tags'
import EventFilterItem from './EventFilterItem'
import {setFieldData, setData} from "../../../redux/actions/helper";
import {CLEAR_EVENTS_FILTER, SIDEBAR_HEIGHT} from '../../../redux/constants/events'
import {SET_TAGS} from '../../../redux/constants/tags'
import {deepCompare2Object} from '../../../helpers/utils'

import "rc-slider/assets/index.css"
import "../../../assets/scss/plugins/extensions/slider.scss"

const createSliderWithTooltip = Slider.createSliderWithTooltip
const Range = createSliderWithTooltip(Slider.Range)

const EventsSidebar = React.memo(props => {

    const handleShowMore = (count, type) => {
      switch (type) {
        case 'projects':
          props.getProjectList({fields: "projects.name,projects.id", includes: "group,owner", limit: count})
          break
        case "types":
          props.getEventsTypes({fields: "types.id,types.name", limit: count})
          break
        case "contacts":
          props.getContacts({include: 'type', limit: count})
          break
        case "tags":
          props.getTags({fields: "tags.id,tags.name", type: "event", limit: count}, SET_TAGS)
          break
      }
    }

    return (
      <div ref={el => {
        if (el && el.offsetHeight) props.setData(SIDEBAR_HEIGHT, el.offsetHeight + 200)
      }}>
        <Card>
          <CardBody className="p-2">
            <div className="multi-range-price">
              <EventFilterItem
                title="Проекты"
                maxValue={8}
                typeFilter="projects"
                filterData={props.projectList}
                userFilterData={props.userFilterData.projects}
                setChecked={props.setFieldData}
                showMore={handleShowMore}
              />
            </div>
            <div className="multi-range-price">
              <EventFilterItem
                title="Тип события"
                maxValue={5}
                typeFilter="types"
                filterData={props.eventsTypes}
                userFilterData={props.userFilterData.types}
                setChecked={props.setFieldData}
                showMore={handleShowMore}
              />
            </div>
            <div className="multi-range-price">
              <EventFilterItem
                title="Контакты"
                maxValue={5}
                typeFilter="contacts"
                filterData={props.contacts}
                userFilterData={props.userFilterData.contacts}
                setChecked={props.setFieldData}
                showMore={handleShowMore}
              />
            </div>
            <div className="multi-range-price">
              <EventFilterItem
                title="Теги"
                maxValue={5}
                typeFilter="tags"
                filterData={props.tags}
                userFilterData={props.userFilterData.tags}
                setChecked={props.setFieldData}
                showMore={handleShowMore}
              />
            </div>
            <div className="clear-filters">
              <Button.Ripple
                block
                className="btn-block"
                color="primary"
                onClick={() => props.setData(CLEAR_EVENTS_FILTER)}
              >
                Очистить фильтр
              </Button.Ripple>
            </div>
          </CardBody>
        </Card>
      </div>
    )
  },
  (prevProps, nextProps) => deepCompare2Object(prevProps, nextProps)
)

const mapStateToProps = state => ({
  eventsTypes: state.events.eventsTypes,
  contacts: {
    data: state.contacts.contacts,
    meta: state.contacts.meta
  },
  userFilterData: state.events.userFilterData,
  tags: state.tags.tags,
  projectList: {
    data: state.projects.list,
    meta: state.projects.meta
  },

})

export default connect(mapStateToProps, {
  setData,
  getTags,
  getContacts,
  setFieldData,
  getProjectList,
  getEventsTypes,
})(EventsSidebar)
